<template>
  <div class="">
    <headeres></headeres>
    <div class="main">
      <div class="body">
        <div class="search_conditions mTop20">
          <div>
            <div class="search_conditions_title c33">Нери</div>
            <div class="mTop20 items">
              <div class="search_conditions_options center mRight16" v-for="(item, index) in 6" style="cursor: pointer"
                   :class="indexOf == index ? 'cFF search_conditions_options_2' : 'c33 search_conditions_options_1'">
                Ткань
              </div>
            </div>
          </div>
          <div class="mTop40">
            <div class="search_conditions_title c33">Функция обуви</div>
            <div class="mTop20 items">
              <div class="search_conditions_options center mRight16" v-for="(item, index) in 6" style="cursor: pointer"
                   :class="indexOf == index ? 'cFF search_conditions_options_2' : 'c33 search_conditions_options_1'">
                Амортизация
              </div>
            </div>
          </div>
        </div>

        <div class="tigList">
          <div class="tigItem">
            <el-tag effect="dark" closable>Ткань</el-tag>
            <el-tag effect="dark" closable>Без скольжения</el-tag>
          </div>
          <div class="tigDeleteBox">
            <el-tag effect="dark">
              <template #default>
                <div class="tigDelete">
                  <span style="margin-right: 16px">Очистить</span>
                  <el-icon>
                    <Delete/>
                  </el-icon>
                </div>
              </template>
            </el-tag>
          </div>
        </div>

        <div class="filterBox">
          <div style="color: #0070E9 ;display: flex;align-items: center">Интеграция</div>
          <div class="filterIconBox">
            <div>Продажи</div>
            <div class="filterIcon">
              <el-icon style="position: relative;top: 4px" :size="10"><CaretTop/></el-icon>
              <el-icon :size="10"><CaretBottom/></el-icon>
            </div>
          </div>
          <div class="filterIconBox">
            <div>Цены</div>
            <div class="filterIcon">
              <el-icon style="position: relative;top: 4px" :size="10"><CaretTop/></el-icon>
              <el-icon :size="10"><CaretBottom/></el-icon>
            </div>
            <div class="filterInputBox">
              <el-input v-model="state.input" style="width: 180px" placeholder="Минимальная цена" />
              <span style="margin: 0 8px">—</span>
              <el-input v-model="state.input" style="width: 180px" placeholder="Минимальная цена" />
            </div>
          </div>
          <div class="filterIconBox">
            <div>Первоначальное количество</div>
            <div class="filterInputBox">
              <el-input v-model="state.input" style="width: 280px" placeholder="Минимальная цена" />
            </div>
          </div>
        </div>

        <div class="mTop20">
          <Product_list type="1"></Product_list>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="cart" setup>
import {ref, reactive} from "vue";
import {CaretBottom, CaretTop, Delete} from "@element-plus/icons-vue";

let radio = ref(false)
let indexOf = ref(0)
const state = reactive({
  input: ''
})

function handleChange() {

}

</script>
<script lang="ts">
import Header from '@/components/Header/Header.vue';//引入的头部的主键
import headeres from '@/components/Header/headeres.vue';//引入的头部的主键
import Tags from '@/components/Tags/Tags.vue';//引入的tags的主键
import Shopping_list from '@/components/Shopping_list/Shopping_list.vue';//引入的商品列表的主键
import Product_list from '@/components/Product_list/Product_list.vue';//引入的商品列表的主键

export default {
  name: 'Login',
  components: {
    Header,
    Shopping_list,
    Tags,
    Product_list,
    headeres
  }
}
</script>

<style lang="less" scoped>

.main {
  display: flex;
  flex-direction: column;
  align-items: center;

  .body {
    width: 1400px;

    .search_conditions {
      width: 1320px;
      height: 224px;
      padding: 40px;
      border-radius: 16px;
      border: 1px solid #CCCCCC;

      .search_conditions_title {
        font-family: PingFang SC;
        font-size: 24px;
        font-weight: 400;
        line-height: 24px;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
      }

      .search_conditions_options {
        border-radius: 8px;
        padding: 16px 20px;
      }

      .search_conditions_options_1 {
        background: #F6F7FB;
      }

      .search_conditions_options_2 {
        background: #0070E9;
      }
    }

    .tigList {
      display: flex;
      align-content: center;
      margin-top: 20px;

      :deep(.el-tag) {
        padding: 16px 20px !important;
        height: auto !important;
        background-color: #0070E9 !important;
        margin-right: 16px;
        border-radius: 8px !important;
        border: none !important;
        cursor: pointer !important;
      }

      :deep(.el-tag__content) {
        font-family: Segoe UI, Segoe UI;
        font-weight: 600;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      :deep(.el-tag .el-icon) {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
      }

      .tigDeleteBox {
        :deep(.el-tag) {
          padding: 16px 20px !important;
          height: auto !important;
          background-color: #F83C57 !important;
          margin-right: 16px;
          border-radius: 8px !important;
        }

        .tigDelete {
          display: flex;
          align-content: center;
        }
      }
    }

    .filterBox{
      display: flex;
      align-content: center;
      margin-top: 20px;

      font-family: Segoe UI, Segoe UI;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      text-align: left;
      font-style: normal;
      text-transform: none;
      .filterIconBox{
        display: flex;
        align-content: center;
        align-items: center;
        .filterIcon{
          display: flex;
          align-content: center;
          flex-direction: column;
          margin-left: 4px;
        }
        .filterInputBox{
          position: relative;
          top:2px;
          margin-left:16px;
          :deep(.el-input__wrapper){
            padding: 5px 15px !important;
            border-radius: 8px !important;
          }
        }
      }

    }
    .filterBox>*{
      margin-right: 42px;
      cursor: pointer;
    }

  }
}
</style>
